<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <style>
        .form-container {
            border-radius: 10px;
            margin: 0px auto;
            width: 550px;
            padding: 15px 10px 5px 15px;
            background: #fff;
            /*border: 1px solid #eaeaea;*/
            text-align: left;
            /*box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);*/
        }

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: darkorange;
        }
        .el-form-item{
            margin-bottom: 10px;
        }
        #submit-button{
            background: #fff url("/button.png");
        }
        .el-input {
            width: 350px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="16">
            <el-form ref="from" :model="form" class="from-container" status-icon :rules="rules" label-position="left" label-width="120px">
                <h1 class="title" >修改密码</h1>
                <el-form-item label="请输入原密码" prop="oldPassword">
                    <el-input type="password"  v-model="form.oldPassword" placeholder="原密码"></el-input>
                </el-form-item>
                <el-form-item label="请输入新密码" prop="newPassword">
                    <el-input type="password"  v-model="form.newPassword" placeholder="6-20位密码，包含数字、大小写字母、特殊字符两种"></el-input>
                    <el-progress :percentage="passwordPercent" :format="passwordPercentFormat" :show-text="true" :text-inside="true" :stroke-width="15" :color="pwdColorF">
                    </el-progress>
                </el-form-item>
                <el-form-item label="请确认密码" prop="repass">
                    <el-input type="password"  v-model="form.repass" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button id="submit-button" @click="update" style="width: 100%;">提交</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
<script th:inline="javascript">
    new Vue({
        el:"#app"
        ,
        data() {

            let validatePass = (rule,value,callback) =>{
                if(value === ''){
                    callback(new Error("请输入新密码"))
                }else {
                    let ls = 0;
                    if(this.form.newPassword !==''){
                        if(this.form.newPassword.match(/([a-z])+/)){
                            ls++;
                        }if(this.form.newPassword.match(/([0-9])+/)){
                            ls++;
                        }if (this.form.newPassword.match(/([A-Z])+/)){
                            ls++;
                        }if (this.form.newPassword.match(/([\W])+/) || this.form.newPassword.match(/(![\u4E00-\u9FA5])+/)){
                            ls++;
                        }
                        if(this.form.newPassword.length<6 || this.form.newPassword.length>20){
                            ls = 0;
                            callback(new Error("密码需要6-20位"));
                        }
                        if(this.form.newPassword.match(/([\u4E00-\u9FA5])+/)){
                            ls =0 ;
                            callback(new Error("密码不能包含中文字符"));
                        }
                        switch (ls){
                            case 0: this.passwordPercent = 0; callback(new Error('密码至少包含数字、大小写字母、特殊字符两种')); break;
                            case 1: this.passwordPercent = 30; callback(new Error('密码至少包含数字、大小写字母、特殊字符两种')); break;
                            case 2: this.passwordPercent = 60; break;
                            case 3: this.passwordPercent = 60; break;
                            case 4: this.passwordPercent = 100; break;
                            default: this.passwordPercent = 0; break;
                        }
                    }
                    callback()
                }
            }
            ;
            let validatePass2 = (rule,value,callback)=>{
                if(value===''){
                    callback(new Error('请再次输入密码'));
                }else if(value !== this.form.newPassword){
                    callback(new Error("两次密码不一致"));
                }else {
                    callback();
                }
            }
            return {
                passwordPercent:0,
                form: {
                    oldPassword: '',
                    newPassword: '',
                    repass: ''
                }
                ,
                rules:{
                    oldPassword: [
                        {required:true}
                    ],
                    newPassword: [
                        {required:true,validator:validatePass,trigger:['blur','change']}
                    ]
                    ,
                    repass: [
                        {required: true,validator:validatePass2,trigger: ['blur','change']}
                    ]
                }
            }
        }
        ,
        methods:{
            passwordPercentFormat(percentage) {
                return percentage === 30 ? '弱' : percentage === 60 ? '中' : percentage === 100 ? '强' : '弱'
            },
            pwdColorF(percentage) {
                return percentage === 30 ? '#FF5340' : percentage === 60 ? '#FFB640' : percentage === 100 ? '#25DC1B' : '#FF5340'
            },
            update(){
                $.post("/business/updatePassword",this.form,function (d) {
                    alert(d)
                    if (d==='ok'){
                        top.window.location.href="/";
                    }
                })
            }
        }
    })
</script>
</body>
</html>